<template>
  <base-breadcrumb>

      <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
        <title-name title="月计划列表"></title-name>

        <div class="pub-table-select-count">
          <a-icon type="info-circle" theme="twoTone"/>
            <span style="margin-right: 12px">
               项目名称：<span class="totalNum">{{projectName}}</span> |
               当前进行月计划：<span class="totalNum">{{ deltailsTotal.planTime}} </span> |
               本月需进行节点总数：<span class="totalNum">{{ deltailsTotal.conductTotal}} </span> 个 |
               本月计划开始节点数：<span class="totalNum">{{ deltailsTotal.startTotal}} </span> 个 |
               本月计划结束节点数：<span class="totalNum">{{ deltailsTotal.endTotal}} </span> 个 |
               延期到本月节点数：<span class="totalNum">{{ deltailsTotal.delayTotal}} </span> 个
            </span>
        </div>

        <a-table :pagination="false" ref="table" :scroll="{ x: 2600}"  row-key="id" :columns="columns" :expandIconColumnIndex="2" :defaultExpandAllRows="true" :data-source="datas"   >
          <template slot="num" slot-scope="text, record, index">
            <span v-if="record.promptLights == 1&&record.promptLights!=null "> <img src="../../../assets/icons/yellowLight.png" width="20" hight="20"/></span>
            <span v-if="record.promptLights == 2&&record.promptLights!=null"> <img src="../../../assets/icons/redLight.png" width="20" hight="20"/></span>
            <span v-if="record.statusLights == 1&&record.statusLights!=null"> <div style="background: rgba(224, 244, 223, 1);width: 40px;height: 20px"></div> </span>
            <span v-if="record.statusLights == 2&&record.statusLights!=null"> <div style="background: rgba(251, 230, 232, 1);width: 40px;height: 20px"></div> </span>
            <span v-if="record.statusLights == 3&&record.statusLights!=null"> <div style="background: rgba(240, 153, 164, 1);width: 40px;height: 20px"></div> </span>
          </template>
            <template slot="name" slot-scope="text, record, index">
                <span><ellipsis :length="20" tooltip>{{record.name}}</ellipsis></span>
            </template>
          <template slot="businessMatters" slot-scope="text, record, index">
              <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
          </template>

            <template slot="firstResponsible" slot-scope="text, record, index">
                <a-tooltip placement="topLeft" @visibleChange="getDatas(record.firstResId)"  :title="infos">
                    {{ record.firstResponsible }}
                </a-tooltip>
            </template>
            <template slot="responsible" slot-scope="text, record, index">
                <a-tooltip placement="topLeft" @visibleChange="getPosts(record.responsibleId)"  :title="posts">
                    {{ record.responsible }}
                </a-tooltip>
            </template>
            <template slot="completeStandard" slot-scope="text, record, index">
                <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
            </template>
            <template slot="verifyDoc" slot-scope="text, record, index">
                <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
            </template>
        </a-table>
      </a-card>


      <div style="float: right" class="page-btn-right-top">
          <a-button type="primary" @click="goBack">关闭</a-button>
      </div>


  </base-breadcrumb>
</template>

<script>
import FooterToolBar from '@/components/FooterToolbar'
import { getMonthPlanDetails } from '@/api/construction/monthPlan'
import { getStaffAll } from '@/api/subassembly/TreeSelectOrganization'
import { getOrgUserPosts } from '@/api/commons'
import Ellipsis from '../../../components/Ellipsis/Ellipsis'

export default {
  name: 'StandardList',
  components: {
    Ellipsis,
    FooterToolBar,
  },
  props: {
    text: String
  },

  data() {
    return {
      infos:[],
      posts:[],

      columns:'',

      title:'审批信息详情',
      forms:{},
      visible: false,
      mdl: null,
      datas:[],
      dataSource:[],   // 审批意见
      level:'',
      deltailsTotal:{},
      projectName:'',
      type:'',
      id:'',

      startTime:'',   // 开始时间
      endTime:''      // 结束时间

    }
  },
  created() {
    this.columns = this.getColumns()
    this.type = this.$route.query.type
    this.id = this.$route.query.id
    this.getMonthPlanDetails()
  },
  computed: {

  },
  methods: {
    // 查询第一责任人 姓名 电话 岗位
    getDatas(val){
      let that = this

      that.infos = []

      // 根据岗位id 查询人员的电话 姓名
      if(val !='' && val!=null ){
        getStaffAll({postId:val}).then(res=>{
          if(res.data && res.data.length > 0){
            let arr = []
            res.data.forEach(function(obj,i) {
              let item = {}
              item.name = obj.name
              item.phone = obj.phone

              arr.push(item)
            })

            var arrys = arr.map(function(objs,index){
              return objs.name + ',' + objs.phone;
            }).join(",");
            that.infos = arrys

          }
        })
      }
    },

    // 查询直接责任人 电话 岗位
    getPosts(val){
      let that = this

      that.posts = []

      // 根据岗位id 查询人员的电话 姓名
      if(val !='' && val != null){
        getOrgUserPosts({employeeId:val}).then(ress=>{

          that.posts = [ress.data.phone]

        })
      }




    },

    // 关闭
    goBack() {
      if(this.type == 'approve'){
        window.close()
      }else{
        this.$close()
      }
    },


    getMonthPlanDetails(){
      let that = this
      getMonthPlanDetails(this.id).then(res=>{
        that.datas = res.data.list
        that.deltailsTotal = res.data
        that.projectName = res.data.projectName
      })
    },

    getColumns(){
      let rowIndex = 1
      return [
        {
          title: '',
          dataIndex: 'num',
          width: 60,
          scopedSlots: { customRender: 'num' },
        },
        {
          title: '编号',
          width: 60,
          dataIndex: 'sortNum',
        },
        {
          title: '阶段/类别',
          dataIndex: 'name',
          width:'12%',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '业务事项',
          dataIndex: 'businessMatters',
          width:120,
          scopedSlots: { customRender: 'businessMatters' }
        },
        {
          title: '管控级别',
          dataIndex: 'controlLevelName',
          width:120,
        },
        {
          title: '周期（天） ',
          dataIndex: 'duration',
          scopedSlots: { customRender: 'duration' }
        },
        {
          title: '计划开始时间',
          dataIndex: 'startTime',
          width:150,
          scopedSlots: { customRender: 'startTime' }
        },
        {
          title: '计划完成时间',
          dataIndex: 'endTime',
          width:150,
          scopedSlots: { customRender: 'endTime' }
        },
        {
          title: '实际完成时间',
          dataIndex: 'completeTime',
        },
        {
          title: '完成标准',
          dataIndex: 'completeStandard',
          width:200,
          scopedSlots: { customRender: 'completeStandard' }
        },
        {
          title: '验证资料',
          dataIndex: 'verifyDoc',
          width:200,
          scopedSlots: { customRender: 'verifyDoc' }
        },
        {
          title: '第一责任人',
          dataIndex: 'firstResponsible',
          width:200,
          scopedSlots: { customRender: 'firstResponsible' }
        },
        {
          title: '直接责任人',
          dataIndex: 'responsible',
          width:200,
          scopedSlots: { customRender: 'responsible' }
        },
        {
          title: '节点状态',
          dataIndex: 'statusName',
        },
      ]
    },

    handleSub(record){
     this.visible = true
      this.forms = record
    },

    handleCancel(){
      this.visible = true
    },
  }
}
</script>

<style lang="less" scoped>
  /deep/ .ant-table-body  .clickRowStyle{
    background-color: rgb(230, 243, 252);
  }
.wrapper-row {
  padding-left: 55px;
  font-weight: bold;
  letter-spacing: 1px;
}

/deep/ .ant-form-item label {
  font-size: 12px;
}

/deep/ .ant-btn {
  border-radius: 5px;
}

/deep/ .ant-calendar-picker-input.ant-input {
  width: 100%;
}

/deep/ .ant-input {
  /*width: 70%;*/
  border-radius: 5px;
}

/deep/ .ant-calendar-picker {
  width: 100%;
  border-radius: 5px;
}

/deep/ .ant-card.ant-card-bordered {
  border-radius: 5px;
}

.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.title-name {
  border-left: 5px solid #1890ff;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
  padding-left: 15px;
  height: 20px;
  line-height: 20px;
}

/deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
  padding-left: 80px;
}
</style>

